import React, { useEffect, useState } from 'react'
import Hoc_login from '../../utils/Hoc_login'
import { NavBar,List ,IndexBar ,SearchBar} from 'antd-mobile'
import { citylb, cityser } from '../../request/api'
function Index() {
    let [city,setcity]=useState([])
     let [sscity,setsscity]=useState([])
     const [value, setValue] = useState('')
    let fun=()=>{
        citylb().then(res=>{
            console.log('lb',res)
            if(res.data.code==200){
                setcity(res.data.data.city)
            }
        })
    }
    useEffect(()=>{
        fun()
    },[])
  return (
    <div>
      <NavBar style={{background:'skyblue'}}> <SearchBar placeholder='请输入内容'   value={value}
          onChange={val => {
            console.log(val)
            setValue(val)
            cityser(val).then(res=>{
                console.log('ss',res)
                if(res.data.code==200){
                    setsscity(res.data.data)
                }
            })
          }} /></NavBar>
          {/* 搜索城市 */}
           <List>
                {sscity.length>0&&sscity.map((item, index) => (
                <List.Item key={index}>{item.name}</List.Item>
                ))}
              </List>

       <div style={{ height: window.innerHeight }}>
      <IndexBar>
        { city.length>0&&city.map((item,index)=>{
         
          return (
            <IndexBar.Panel
              index={item.initial}
              title={`标题${item.initial}`}
              key={`标题${item.initiale}`}
            >
              <List>
                {item.list.map((item, index) => (
                  <List.Item key={index}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
      
    </div>
  )
}

export default Hoc_login(Index)
